<{include file="tpl/filter.tpl"}>
<{include file="tpl/chart.tpl"}>
<{include file="tpl/grid.tpl"}>

<script>
    function getBarNode(value,source){
        var html = '<div style="padding-left: 10px;background:rgb(135, 226, 153); width: ' + value + '%; height: 80%; position:absolute; top: 4px;left: 0px;"><span style="position: relative;left: 103%;top: 5px;">' + source + '</span></div>';
        return $(html);
    }
    function formatPercentBar(){

        $("td[key=RoleUserRate]").each(
                function(){
                    $(this).css("position","relative");
                    var maxPercent = $(this).parent().parent().parent().data("params")['maxPercent'];
                    if(maxPercent == 'undefined' || maxPercent >= 90){
                        maxPercent = 100;
                    }else{
                        maxPercent += 10;
                    }
//                    alert(maxPercent);
                    var p = $(this).html();
                    var value = parseFloat(p);
                    var percent = (value / maxPercent) * 100;

                    var bar = getBarNode(percent,p);
                    $(this).html("");
                    $(this).append(bar);
                }
        );
    }
    $(function() {
        var filter = $("#once-filter"),
                showType = filter.find("input[name='show_type']");

        $("a.grid-link").click(function () {
            var value = $(this).attr('value');
            $("#filter-btn").click();
        });

        $(".link-btn").click(function(){
            $("#filter-btn").click();
        });
        $("#__t_grid_0").setGridCallback('sort', formatPercentBar);
        formatPercentBar();
    });
</script>